<template>
  <div class="wrap">
    <div style="margin: 4px 0">{{ pathWidth }} <input type="range" min="300" max="3000" v-model="pathWidth" /></div>

    <el-table
      :data="files"
      style="width: 100%"
      border
      @selection-change="emit('selection-change', $event)"
      @cell-dblclick="handleCellDblclick"
    >
      <el-table-column type="selection" width="45" />
      <el-table-column prop="isFile" label="类型" width="55">
        <template #default="{ row }">
          <el-row type="flex" justify="center">
            <i v-if="row.isFile" class="iconfont icon-24gl-fileEmpty"></i>
            <i v-else-if="row.isDir" class="iconfont icon-wj-wjj"></i>
            <i v-else class="iconfont icon-guanbi"></i>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="文件路径" :width="pathWidth" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

export type FileInfoType = {
  isDir: boolean;
  isFile: boolean;
  path: string;
};

export type Props = {
  files: Array<FileInfoType>;
};

const props = withDefaults(defineProps<Props>(), {
  files: () => []
});

const pathWidth = ref(500);

const emit = defineEmits(["selection-change", "dblClickPath"]);

const handleCellDblclick = (row: FileInfoType, column: any) => {
  // 双击路径
  if (column.property === "path") {
    emit("dblClickPath", row);
  }
};
</script>

<style lang="scss" scoped></style>
